<?xml version="1.0" encoding="UTF-8" ?>
<!--
Copyright 2014 Christian Hildebrandt.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core" xmlns:ti="http://java.sun.com/jsf/composite/components">

<h:head>
</h:head>
<h:body>
	<ui:composition template="/WEB-INF/templates/common.xhtml">
		<ui:define name="title">Benutzerverwaltung</ui:define>
		<ui:define name="stylesheet">
			<h:outputStylesheet name="dataTables.bootstrap.css" library="css/datatables/" />
		</ui:define>
		<ui:define name="script">
			<h:outputScript name="jquery.dataTables.js" library="js/plugins/datatables" />
			<h:outputScript name="dataTables.bootstrap.js" library="js/plugins/datatables" />
			<h:outputScript name="timera.js" library="js" />
			<!-- page script -->
			<script type="text/javascript">
				//Datatable features
				$(function() {
					$("#datatable_employees").dataTable();
				});
				//Collapse Editform when user clicks edit button
				function showUserEdit() {
					$('#collapseUserEdit').collapse('show');
					return false;
				}

			</script>
		</ui:define>

		<ui:define name="content">

			<!-- Content Header (Page header) -->
			<section class="content-header">
			<h1>
				Verwaltung <small>Benutzer</small>
			</h1>
			<ol class="breadcrumb">
				<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
				<li><a href="#"><i class="fa fa-dashboard"></i> Verwaltung</a></li>
				<li class="active">Benutzer</li>
			</ol>
			</section>


			<!-- Main content -->
			<section class="content">
			<h2 class="page-header">Mitarbeiter Hinzufügen, Editieren und Löschen</h2>



			<!-- 			ACCORDION BEGIN --> <h:panelGroup id="accordion_adduser" layout="block" styleClass="row">
				<h:panelGroup layout="block" styleClass="col-md-12">
					<!-- 					<h:panelGroup layout="block" styleClass="box box-solid"> -->
					<!-- /.box-header -->
					<h:panelGroup layout="block" styleClass="box-body">
						<h:panelGroup layout="block" styleClass="box-group" id="accordion">
							<!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
							<h:panelGroup layout="block" styleClass="panel box box-success">

								<h:panelGroup layout="block" id="accordionLabel" styleClass="box-header">
									<h4 class="box-title">
										<h:link fragment="#collapseUserEdit" data-toggle="collapse" data-parent="#accordion">
											<!-- <i class="fa-plus-square-o" /> -->
											<h:outputText value="Benutzer bearbeiten" rendered="#{usersBean.editMode}" />
											<h:outputText value="Benutzer hinzufügen" rendered="#{not usersBean.editMode}" />
										</h:link>
									</h4>
								</h:panelGroup>

								<h:panelGroup layout="block" id="collapseUserEdit" class="panel-collapse collapse">
									<h:form id="editUserForm">
										<!-- TABS -->
										<h:panelGroup layout="block" styleClass="nav-tabs-custom">
											<ul class="nav nav-tabs" id="tabs">
												<li class="active"><h:link fragment="tab_personal_details" data-toggle="tab">
														<h:outputText value="Persönliche Daten" />
													</h:link></li>
												<li><h:link fragment="tab_credential_details" data-toggle="tab">
														<h:outputText value="Anmeldedaten" />
													</h:link></li>
												<li><h:link fragment="tab_contract_details" data-toggle="tab">
														<h:outputText value="Vertragsdaten" />
													</h:link></li>
											</ul>
											<h:panelGroup layout="block" styleClass="tab-content">
												<!-- PERSONAL DETAILS -->
												<div class="tab-pane active fade in" id="tab_personal_details">
													<h:panelGroup layout="block" styleClass="box-body">
														<h:panelGroup layout="block" styleClass="row">
															<h:panelGroup layout="block" styleClass="col-md-2">
																<h:panelGroup layout="block" styleClass="form-group">
																	<h:outputLabel for="salutation" value="Anrede" />
																	<h:selectOneMenu id="salutation" value="#{usersBean.editUser.salutation}" styleClass="form-control">
																		<f:selectItems value="#{usersBean.salutations}" var="salutation" itemValue="#{salutation}" itemLabel="#{msg[salutation.name]}" />
																	</h:selectOneMenu>
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-2">
																<ti:inputFormGroup name="firstname" label="Vorname" value="#{usersBean.editUser.firstName}" placeholder="Vorname" required="true"
																	requiredMessage="#{msg['users.required.firstname']}" />
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-2">
																<h:panelGroup layout="block" styleClass="form-group">
																	<h:outputLabel for="lastname" value="Nachname" />
																	<h:inputText id="lastname" value="#{usersBean.editUser.lastName}" styleClass="form-control" placeholder="Nachname" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-2">
																<h:panelGroup layout="block" styleClass="form-group">
																	<h:outputLabel for="birthday" value="Geburtsdatum" />
																	<h:inputText id="birthday" value="#{usersBean.editUser.birthday}" styleClass="form-control datepicker" placeholder="Geburtsdatum">
																		<f:convertDateTime pattern="dd.MM.yyyy" />
																	</h:inputText>
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-2">
																<h:panelGroup layout="block" styleClass="form-group">
																	<h:outputLabel for="street" value="Straße" />
																	<h:inputText id="street" value="#{usersBean.editUser.address.street}" styleClass="form-control" placeholder="Straße" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-2">
																<h:panelGroup layout="block" styleClass="form-group">
																	<h:outputLabel for="housenumber" value="Hausnummer" />
																	<h:inputText id="housenumber" value="#{usersBean.editUser.address.houseNumber}" styleClass="form-control" placeholder="Hausnummer" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-2">
																<h:panelGroup layout="block" styleClass="form-group">
																	<h:outputLabel for="zipcode" value="Postleitzahl" />
																	<h:inputText id="zipcode" value="#{usersBean.editUser.address.zipCode}" styleClass="form-control" placeholder="Postleitzahl" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-2">
																<h:panelGroup layout="block" styleClass="form-group">
																	<h:outputLabel for="city" value="Ort" />
																	<h:inputText id="city" value="#{usersBean.editUser.address.city}" styleClass="form-control" placeholder="Ort" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-2">
																<h:panelGroup layout="block" styleClass="form-group">
																	<label for="telephone">Telefon (Arbeit)</label>
																	<input type="text" class="form-control" id="telephone_work" placeholder="Telefon" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-2">
																<h:panelGroup layout="block" styleClass="form-group">
																	<h:outputLabel for="telephone_private" value="Telefon (Privat)" />
																	<h:inputText id="telephone_private" value="#{usersBean.editUser.phoneNumber}" styleClass="form-control" placeholder="Telefon" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-2">
																<h:panelGroup layout="block" styleClass="form-group">
																	<h:outputLabel for="email" value="Email" />
																	<h:inputText id="email" value="#{usersBean.editUser.email}" styleClass="form-control" placeholder="Email" />
																</h:panelGroup>
															</h:panelGroup>
														</h:panelGroup>
													</h:panelGroup>
												</div>
												<!-- CREDENTIALS -->
												<div class="tab-pane fade" id="tab_credential_details">
													<h:panelGroup layout="block" styleClass="box-body">
														<h:panelGroup layout="block" styleClass="row">
															<h:panelGroup layout="block" styleClass="col-md-6">
																<h:panelGroup layout="block" styleClass="form-group">
																	<h:outputLabel for="role" value="Rolle" />
																	<h:selectOneMenu id="role" value="#{usersBean.editUser.role}" styleClass="form-control">
																		<f:selectItems value="#{usersBean.roles}" var="role" itemValue="#{role}" itemLabel="#{msg[role.name]}" />
																	</h:selectOneMenu>
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-6">
																<ti:inputFormGroup name="username" label="Benutzername" value="#{usersBean.editUser.username}" placeholder="Benutzername" required="true"
																	requiredMessage="#{msg['users.required.username']}" />
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-6">
																<h:panelGroup layout="block" styleClass="form-group">
																	<h:outputLabel for="password1" value="Passwort" />
																	<h:inputSecret id="password1" value="#{usersBean.editUser.password}" redisplay="true" styleClass="form-control" placeholder="Passwort" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-6">
																<h:panelGroup layout="block" styleClass="form-group">
																	<h:outputLabel for="password2" value="Passwort Wiederholung" />
																	<h:inputSecret id="password2" value="#{usersBean.editUser.password}" redisplay="true" styleClass="form-control"
																		placeholder="Passwort Wiederholung" />
																</h:panelGroup>
															</h:panelGroup>
														</h:panelGroup>
													</h:panelGroup>
												</div>
												<!-- CONTRACT DETAILS -->
												<div class="tab-pane fade" id="tab_contract_details">
													<h:panelGroup layout="block" styleClass="box-body">
														<h:panelGroup layout="block" styleClass="row">
															<h:panelGroup layout="block" styleClass="col-md-3">
																<h:panelGroup layout="block" styleClass="form-group">
																	<label for="manhours_per_week">Wochenarbeitszeit</label>
																	<input type="text" class="form-control" id="manhours_per_week" placeholder="Wochenarbeitszeit" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-3">
																<h:panelGroup layout="block" styleClass="form-group">
																	<label for="vacation_day_per_year">Jahres-Urlaubstage</label>
																	<input type="text" class="form-control" id="vacation_day_per_year" placeholder="Jahres-Urlaubstage" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-3">
																<h:panelGroup layout="block" styleClass="form-group">
																	<label for="traveltime-subtraction">Reisezeitabzug</label>
																	<input type="text" class="form-control" id="traveltime-subtraction" placeholder="Reisezeitabzug" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-3">
																<h:panelGroup layout="block" styleClass="form-group">
																	<label for="manhours-subtraction-per-month">Überstundenabzug (Monat)</label>
																	<input type="text" class="form-control" id="manhours-subtraction-per-month" placeholder="Überstundenabzug" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-3">
																<h:panelGroup layout="block" styleClass="form-group">
																	<label for="cutoff-date">Stichtag (EOB) <!-- <button class="btn btn-default btn-sm" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button> -->
																		<i data-trigger="hover" data-placement="right" data-original-title="Stichtag"
																			data-content="Dies ist der Stichtag an dem die Umstellung auf unser System vorgenommen wird. Bitte beachten Sie, dass die nachfolgenden Einstellungen erst am Ende des Stichtages zum Tragen kommen. Alle Buchungen am Stichtag werden daher nicht berücksichtigt. (EOB - End Of Businessday).">
																			<i class="fa fa-info-circle" style="color: steelblue;" />
																		</i>
																	</label>
																	<input type="text" class="form-control" id="cutoff-date" placeholder="Stichtag" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-3">
																<h:panelGroup layout="block" styleClass="form-group">
																	<label for="cutoff-vacation_days">Resturlaub zum Stichtag</label>
																	<input type="text" class="form-control" id="cutoff-vacation_days" placeholder="Resturlaub" />
																</h:panelGroup>
															</h:panelGroup>
															<h:panelGroup layout="block" styleClass="col-md-3">
																<h:panelGroup layout="block" styleClass="form-group">
																	<label for="cutoff-manhours">Über-/ Minusstunden zum Stichtag</label>
																	<input type="text" class="form-control" id="cutoff-manhours" placeholder="Über-/ Minusstunden" />
																</h:panelGroup>
															</h:panelGroup>
														</h:panelGroup>
													</h:panelGroup>
												</div>
											</h:panelGroup>
											<h:outputText value="* Pflichtfeld" />
										</h:panelGroup>

										<div class="box-footer">
											<div class="margin">
												<h:commandButton styleClass="btn btn-warning btn-sm" value="#{msg['button.label.clear']}" action="#{usersBean.clear}" />
												<h:commandButton styleClass="btn btn-success btn-sm" value="#{msg['button.label.save']}" action="#{usersBean.save}">
													<f:ajax execute="@form" render="@form" />
												</h:commandButton>
											</div>
										</div>
									</h:form>
								</h:panelGroup>
							</h:panelGroup>
						</h:panelGroup>
					</h:panelGroup>
				</h:panelGroup>
			</h:panelGroup>



			<h2 class="page-header">Mitarbeiterübersicht</h2>
			<h:panelGroup layout="block" styleClass="row">
				<h:panelGroup layout="block" styleClass="col-xs-12">

					<h:panelGroup layout="block" styleClass="box">
						<!-- /.box-header -->
						<h:panelGroup layout="block" styleClass="box-body table-responsive">

							<h:dataTable id="datatable_employees" value="#{usersBean.users}" var="item" styleClass="table table-bordered table-striped">

								<h:column>
									<f:facet name="header">
										<h:outputText value="Name" />
									</f:facet>
									<h:outputText value="#{item.firstName} #{item.lastName}" />
								</h:column>
								<h:column>
									<f:facet name="header">
										<h:outputText value="Adresse" />
									</f:facet>
									<h:outputText value="#{item.address.toString()}" />
								</h:column>
								<h:column>
									<f:facet name="header">
										<h:outputText value="Telefon" />
									</f:facet>
									<h:outputText value="#{item.phoneNumber}" />
								</h:column>
								<h:column>
									<f:facet name="header">
										<h:outputText value="Geburtsdatum" />
									</f:facet>
									<h:outputText value="#{item.birthday}">
										<f:convertDateTime pattern="dd.MM.yyyy" />
									</h:outputText>
								</h:column>
								<h:column>
									<f:facet name="header">
										<h:outputText value="Benutzername" />
									</f:facet>
									<h:outputText value="#{item.username}" />
								</h:column>
								<h:column>
									<f:facet name="header">
										<h:outputText value="Rolle" />
									</f:facet>
									<h:outputText value="#{item.role}" />
								</h:column>
								<h:column>
									<h:form>
										<h:panelGroup layout="block" styleClass="btn-group">
											<h:commandButton styleClass="btn btn-warning fa-input" value="&#xf044;" onclick="showUserEdit();">
												<f:setPropertyActionListener target="#{usersBean.editUser}" value="#{item}" />
												<f:setPropertyActionListener target="#{usersBean.editMode}" value="true" />
												<f:ajax render="@form :editUserForm :accordionLabel" />
											</h:commandButton>
											<h:commandButton styleClass="btn btn-danger fa-input" value="&#xf014;" action="#{usersBean.delete}">
												<f:setPropertyActionListener target="#{usersBean.deleteUser}" value="#{item}" />
											</h:commandButton>
										</h:panelGroup>
									</h:form>
								</h:column>
							</h:dataTable>
						</h:panelGroup>
					</h:panelGroup>
				</h:panelGroup>
			</h:panelGroup> </section>

			<!-- /.content -->
		</ui:define>
	</ui:composition>
</h:body>
</html>